 <template>
  <div id="admin-login" class="bre-height100">
    <a-form id="userlogin" layout="inline" :model="formInline" @submit="handleSubmit" >
      <a-form-item>
        <a-input v-model:value="formInline.username" placeholder="username">
          <template #prefix
            ><UserOutlined style="color: rgba(0, 0, 0, 0.25)"
          /></template>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input
          v-model:value="formInline.password"
          type="password"
          placeholder="Password"
        >
          <template #prefix
            ><LockOutlined style="color: rgba(0, 0, 0, 0.25)"
          /></template>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit"
          :disabled="formInline.username === '' || formInline.password === ''"
        >
          登录
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script>

import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { userLogin } from "@adminCore/api/user"
import { reactive } from "vue";    
import { useRouter } from 'vue-router'
import { useStore } from 'vuex';
 import  components from 'ant-design-vue';
export default {
  components: { UserOutlined,LockOutlined, },
  setup() { 
    //获取当前所有注入的实例方法 
    const $router=useRouter()
    const $store = useStore()
    //------------登录---------------
    const formInline = reactive({
      username: "", password: "",
    }); 
    let handleSubmit=()=>{
      userLogin(formInline).then(response => {
        let { data } = response.data;
            if(!data.state&&!response.headers["authentication"]){
              components.message.warning("账号或者密码错误"); 
              return
            }    
            $store.commit("setIsLogin",{token:response.headers["authentication"],...data})
            $router.replace("/")//跳转首页 
          });
    } 
      //------------注册--------------- 

    return {
      formInline,
      handleSubmit,
    };
  },

  
};



</script>

<style  scoped>
#userlogin {
  position: fixed;
  margin: auto;
  left: 0px;
  right: 0px;
  top: -260px;
  bottom: 0px;
  width: 230px;
  height: 120px;
  text-align: center;
}
#admin-login {
  background: url(http://imageproxy.chaoxing.com/0x0,sx-ThHVRWasjegmbvk8y1SaMrJ7IevSYifZwTbsOuYC0/http://p.ananas.chaoxing.com/star3/origin/225d58fc35438872a3cb73062027561f.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
</style>